<template>
    <el-drawer :visible.sync="show" size="1000px;" :append-to-body="true">
        <div slot="title">
            <h4 style="margin-bottom: 0;font-weight: bold;">
                <el-button style="height: 0;width: 0;padding: 0;"></el-button>
                <el-tag style="margin-right: 10px;font-weight: normal;">店铺详情</el-tag>
                {{list.shop.shop_name}}
                <el-button type="primary" @click="verify_dialog = true">{{list.shop.verified_name}}</el-button>
            </h4>
        </div>
        <div class="detail_form">
            <el-card shadow="hover">
                <div slot="header">
                    <span style="font-weight: bold;">店铺信息</span>
                </div>
                <el-form label-width="80px" v-loading="loading">
                    <el-form-item label="店铺名称">{{list.shop.shop_name}}</el-form-item>
                    <el-form-item label="联系人">{{list.shop.contact_man}}</el-form-item>
                    <el-form-item label="联系电话">{{list.shop.contact_phone}}</el-form-item>
                    <el-form-item label="微信昵称">{{list.shop.nickname}}</el-form-item>
                    <el-form-item label="微信手机">{{list.shop.phone}}</el-form-item>
                    <el-form-item label="openid">{{list.shop.openid}}</el-form-item>
                    <el-form-item label="新建时间">{{list.shop.created_at}}</el-form-item>
                    <el-form-item label="店铺区域">{{list.shop.short_name}}</el-form-item>
                    <el-form-item label="店铺地址">{{list.shop.address}}</el-form-item>
                    <el-form-item label="关键词">{{list.shop.key_word}}</el-form-item>
                    <el-form-item label="审核人" v-if="[1,2].includes(list.shop.verified) && list.shop.verified_user">{{list.shop.verified_user}}</el-form-item>
                    <el-form-item label="审核时间" v-if="[1,2].includes(list.shop.verified) && list.shop.verified_at">{{list.shop.verified_at}}</el-form-item>
                    <el-form-item label="审核备注" v-if="list.shop.verify_remark">{{list.shop.verify_remark}}</el-form-item>
                    <el-form-item label="店铺链接">{{list.shop.link_url}}</el-form-item>
                    <el-form-item label="店铺图片">
                        <el-image style="width: 100px; height: 100px;margin-right: 10px;"
                                  v-if="list.shop.head_img"
                                  :preview-src-list="[list.shop.head_img]"
                                  :src="list.shop.head_img"
                                  fit="cover"></el-image>
                    </el-form-item>
                </el-form>
            </el-card>
            <el-card shadow="hover">
                <div slot="header">
                    <span style="font-weight: bold;">探店订单</span>
                </div>
                <el-table :data="list.order" border stripe style="width: 100%" v-loading="loading">
                    <el-table-column prop="eo_id" label="订单编号"></el-table-column>
                    <el-table-column prop="start_date" label="探店起期"></el-table-column>
                    <el-table-column prop="end_date" label="探店止期"></el-table-column>
                    <el-table-column prop="status_name" label="订单状态">
                        <template slot-scope="scope">
                            <el-button type="text" @click="$refs.exploreDetail.init(scope.row.eo_id)">
                                {{scope.row.status_name}}
                            </el-button>
                        </template>
                    </el-table-column>
                    <el-table-column prop="total_num" width="60" label="总单量"></el-table-column>
                    <el-table-column prop="remaining_num" width="60" label="剩余"></el-table-column>
                    <el-table-column prop="distribution_num" width="60" label="已抢单"></el-table-column>
                    <el-table-column prop="pending_num" width="60" label="进行中"></el-table-column>
                    <el-table-column prop="success_num" width="60" label="完成数"></el-table-column>
                    <el-table-column prop="failed_num" width="60" label="取消数"></el-table-column>
                </el-table>
            </el-card>
            <el-card shadow="hover">
                <div slot="header">
                    <span style="font-weight: bold;">霸王餐</span>
                </div>
                <el-table :data="list.lottery" border stripe style="width: 100%" v-loading="loading">
                    <el-table-column prop="goods_name" label="活动名称">
                        <template slot-scope="scope">
                            <el-button type="text" @click="$refs.activityDetail.init(scope.row)">
                                {{scope.row.goods_name}}
                            </el-button>
                        </template>
                    </el-table-column>
                    <el-table-column prop="status" label="状态"></el-table-column>
                    <el-table-column prop="created_at" label="发布时间"></el-table-column>
                </el-table>
            </el-card>
        </div>
        <explore-detail-dialog ref="exploreDetail" @refresh="refresh"></explore-detail-dialog>
        <activity-detail-dialog ref="activityDetail" @refresh="$store.dispatch('tableReload')"></activity-detail-dialog>
        <el-dialog title="店铺审核" :visible.sync="verify_dialog" width="30%" append-to-body>
            <el-form>
                <el-form-item label="审核备注">
                    <el-input type="textarea" v-model="list.shop.verify_remark"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="verify_dialog = false">取 消</el-button>
                <el-button type="primary" @click="confirm(2)" :loading="verifying">拒 回</el-button>
                <el-button type="primary" @click="confirm(1)" :loading="verifying">通 过</el-button>
            </span>
        </el-dialog>
    </el-drawer>
</template>

<script>
    import ExploreDetailDialog from "./ExploreDetailDialog";
    import ActivityDetailDialog from "../../activity/Dialog/ActivityDetailDialog";

    export default {
        name: "ShopDetailDialog",
        components: {
            ExploreDetailDialog,
            ActivityDetailDialog,
        },
        data() {
            return {
                show: false,
                shop_id: '',
                loading: false,
                list: {
                    shop: {},
                    orders: {},
                    lottery: [],
                },
                verify_dialog: false,
                verifying: false,
            }
        },
        methods: {
            init(shop_id) {
                this.shop_id = shop_id;
                this.loadData();
                this.show = true;
            },
            loadData() {
                this.loading = true;
                this.post('/api/laifei/shop/detail', {shop_id: this.shop_id}).then(result => {
                    if (result.code === 0) {
                        this.list = result.data;
                    } else {
                        this.$message.error(result.msg);
                    }
                    this.loading = false;
                })
            },
            refresh() {
                this.loadData();
                this.$emit('refresh');
            },
            confirm(verified) {
                this.verifying = true;
                this.post('/api/laifei/shop/verify', {shop_id: this.shop_id,verified:verified,verify_remark:this.list.shop.verify_remark}).then(result=>{
                    this.verifying = false;
                    if(result.code === 0){
                        this.$message.success('审核成功');
                        this.verify_dialog = false;
                        this.refresh();
                    } else {
                        this.$message.error(result.msg);
                    }
                })
            },
        }
    }
</script>

<style scoped>

</style>
<style>
    .detail_form {
        padding: 0 10px;
    }

    .detail_form .el-card {
        margin-bottom: 10px;
    }

    .detail_form .el-form-item {
        margin-bottom: 0;
    }

    .detail_form .el-form {
        display: flex;
        flex-wrap: wrap;
    }

    .detail_form .el-form-item {
        flex: 0 0 33%;
    }

    .detail_form .el-card__header {
        padding: 8px 20px;
    }

    .box-card {
        width: 100%;
    }
</style>
